<template>
  <div class="model-form">
    <div class="left">
      <div class="image"></div>
    </div>
    <div class="model-content">
      <template v-for="(element, index) in data.list">
        <model-form-item v-if="element && element.key" :key="element.key" :element="element" :index="index"
          :data="data"></model-form-item>
      </template>
      <!-- <div class="goodsButton">
        <Page :total="2" />
      </div> -->
    </div>
    <div class="right">
      <div class="image"></div>
    </div>
  </div>
</template>
<script>
import ModelFormItem from './ModelFormItem.vue';
export default {
  name: 'modelForm',
  components: {
    ModelFormItem
  },
  data() {
    return {
      data: {
        list: [
          {
            key: '1',
            type: 'carousel',
          },
          {
            key: '2',
            type: "goodsType",
            options: {
              "list": [
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/230413f3a04b4dfeb4797211a760f0ce.jpg?x-oss-process=style/400X400",
                  "price": 2999,
                  "title": "华为笔记本MateBook ",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1387980214075654144&goodsId=1376727107777855488",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/2e7ee45e5b694f468847767b3e1ec0ba.jpg?x-oss-process=style/400X400",
                  "price": 1999,
                  "title": "惠普(HP)",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1387979561995599872&goodsId=1376718137113706496",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/6e99e9b542ec4e7e9c6bcab75d043034.jpg?x-oss-process=style/400X400",
                  "price": 5000,
                  "title": "戴尔（DELL）",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1387979473474813952&goodsId=1376710057034514432",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/6069e7dced154e85b24b79e8e17c0743.jpg?x-oss-process=style/400X400",
                  "price": 3457,
                  "title": "iphone12 蓝色 128G",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1502307430121553921&goodsId=1502093401482543106",
                  "___index": "1"
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/51649c25b73044908837ad494c4a7c34.jpg?x-oss-process=style/400X400",
                  "price": 4500,
                  "title": "苹果/Apple iPhone ",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1387980568490147840&goodsId=1376839431016677376",
                  "___index": "1"
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/67982d3616534edbb62252e6d1b22e26.jpg?x-oss-process=style/400X400",
                  "price": 5555,
                  "title": "苹果/Apple iPhone 11 ",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1386931039305203712&goodsId=1376841229546815488",
                  "___index": "1"
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/0f9fc5610ccb448d9ada49e960598c4c.jpg?x-oss-process=style/400X400",
                  "price": 2424,
                  "title": "Apple iPhone 12 Pro ",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1387977227299192832&goodsId=1376851499652481024",
                  "___index": "1"
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/05ca81490da04b9a888bb4d7a3590ddc.jpg?x-oss-process=style/400X400",
                  "price": 30000,
                  "title": "华为P40 5G",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1599453920853475330&goodsId=1599453920715063298",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/50c05bc4bff249fbb0048028a6ad4ce9.jpg?x-oss-process=style/400X400",
                  "price": 3999,
                  "title": "华为/HUAWEI Mate40 RS",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1387978145977597952&goodsId=1376565597554343936",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/6069e7dced154e85b24b79e8e17c0743.jpg?x-oss-process=style/400X400",
                  "price": 3456,
                  "title": "iphone12 黑色 128G",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1502307429903450113&goodsId=1502093401482543106",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/9f66c6e074f9405195eea1c5587da964.jpg?x-oss-process=style/400X400",
                  "price": 7474,
                  "title": "三星Galaxy S21 Ultra ",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1376850145177501696&goodsId=1376850145118781440",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/0c32095777704e2db7a5f858c32403e9.jpg?x-oss-process=style/400X400",
                  "price": 3333,
                  "title": "三星Galaxy S21 ",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1386125116261269504&goodsId=1376836083676872704",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/31b6e533b7ee4a1289184e82c14d3582.jpg?x-oss-process=style/400X400",
                  "price": 4444,
                  "title": "三星Galaxy S21 ",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1386125116563259392&goodsId=1376836083676872704",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/60ff5995e00e40f2af026aef0342e4c2.jpg?x-oss-process=style/400X400",
                  "price": 8000,
                  "title": "GUCCI古驰",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1643465729750827009&goodsId=1643465729662746626",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/7f2a7e9817564304b70fb2d50f7354a7.jpg?x-oss-process=style/400X400",
                  "price": 5425,
                  "title": "小米(MI) Redmi K30",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1387978909340925952&goodsId=1376847364819517440",
                  "___index": 0
                },
                {
                  "img": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/d6c50c54d130474796fb73e1aa0b5163.jpg?x-oss-process=style/400X400",
                  "price": 5435,
                  "title": "小米(MI) Redmi K30 ",
                  "desc": "万家宝藏好店等你来",
                  "url": "/goodsDetail?skuId=1387978909336731648&goodsId=1376847364819517440",
                  "___index": 0
                }
              ]
            },
          }
        ]
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.model-form {
  width: 100%;
  min-height: 1200px;
  display: flex;
  position: relative;
}

.model-content {
  width: 100%;
  min-height: 1300px;
  position: relative;
  z-index: 2;

}

.model-content>.model-item:first-child {
  background: #fff !important;
}
.model-content>.model-item:last-child {
  min-height: 920px;
}

.left {
  width: 400px;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;

  .image {
    width: 100%;
    height: 600px;
    background: url('../../assets/write/1.png') no-repeat;
    background-size: 100% 100%;
  }
}

.right {
  width: 400px;
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;

  .image {
    width: 100%;
    height: 600px;
    background: url('../../assets/write/2.png') no-repeat;
    background-size: 100% 100%;
  }
}

.goodsButton {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
}
</style>
